<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height:21.2202vw;
            width: 21.2202vw;
        }
        .father {
            background: linear-gradient(#fb3,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
            background-size: 100% 50px;
        }
        .fathertwo{
            margin-top: 10px;
            background: linear-gradient(90deg,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
            background-size: 50px 100% ;
        }
        .fatherthree{
            margin-top: 10px;
            background: linear-gradient(45deg,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
            background-size: 50px 100% ;
        }
        .fatherfour{
            margin-top: 10px;
            background: linear-gradient(45deg,#fb3,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
            background-size: 50px 50px;
        }
        .fatherfive{
            margin-top: 10px;
            background: repeating-linear-gradient(to bottom,#fb3 ,#fb3 20px,#58a 0,#58a 40px);
        }
        .fathersix{
            margin-top: 10px;
            background: lawngreen;
            background-image: repeating-linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.4) 20px,transparent 0,transparent 40px);
        }
        .fatherseven{
            margin-top: 10px;
            background: cadetblue;
            background-image: repeating-linear-gradient(to bottom,white 0,white 2px,transparent 0,transparent 40px),
            repeating-linear-gradient(90deg,white 0,white 2px,transparent 0,transparent 40px);
        }
        .fathereight{
            margin-top: 10px;
            background: cadetblue;
            background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
            background-size: 30px 30px;
            background-position: 0 0,15px 15px;
        }
        .fathernine{
            margin-top: 10px;
            background:slateblue;
            background-image: linear-gradient(45deg,#bbb 25%,transparent 0),
                                linear-gradient(45deg,transparent 75%,#bbb 0),
                                linear-gradient(45deg,#bbb 25%,transparent 0),
                                linear-gradient(45deg,transparent 75%,#bbb 0);
            background-size: 30px 30px;
            background-position: 0 0,15px 15px,15px 15px,30px 30px;
        }
    </style>
</head>

<body>
    <div class="father"></div>
    <div class="fathertwo"></div>
    <div class="fatherfour"></div>
    <div class="fatherfive"></div>
    <div class="fathersix"></div>
    <div class="fatherseven"></div>
    <div class="fathereight"></div>
    <div class="fathernine"></div>
</body>

</html>